import React, { useState } from 'react'
import { List } from 'react-vant'
import style from "./style.module.scss";
import { MyHeader, MypatientCieclefooter } from '../../components';
import MypathienList from '../../components/mypathienList';
import { KnowledgeBaseRawState, getpathienCircle, pathienCircleHomeList } from '../../api/patientCircle';
import { getKnowledgeBase } from '../../api/home';
import { useRequest } from 'ahooks';
import url1 from '../../assets/images/icon/common resource/hdpi/common_icon_search_n.png'
import { useNavigate } from 'react-router-dom';
import url4 from "../../assets/images/icon/common resource/hdpi/common_nav_message_black_s.png";
const Index: React.FC = () => {
  const navigate=useNavigate()
  // 病友圈首页列表参数
  const [pathienCirclList, setPathienCirclList] = useState<pathienCircleHomeList[]>([])
  // 病友圈首页请求参数
  const [pathienCirclParams, setPathienCirclParams] = useState({
    departmentId: 2,
    page: 1,
    count: 5,
  })
  const [headertitle,setHeadertitle]=useState('')
  const [headerIsopen,setHeaderIsopen]=useState(true)
  const [active, setActive] = useState(2)
  // 上拉加载开关
  const [finished, setFinished] = useState<boolean>(false)
  // tab切换请求hooks
  const { data: tablist = [] } = useRequest<
    KnowledgeBaseRawState[],
    []
  >(async () => {
    const resp = await getKnowledgeBase();
    const item=resp.result.find(item=>item.id===2)
    setHeadertitle(item.departmentName)
    return resp.result;
  });
  // 上拉加载事件
  const onLoadRefresh = async () => {

    const resp = await getpathienCircle(pathienCirclParams);
    setPathienCirclList([...pathienCirclList, ...resp.result])
    setPathienCirclParams({
      ...pathienCirclParams,
      page: pathienCirclParams.page + 1
    })
    resp.result.length<pathienCirclParams.count ? setFinished(true) : setFinished(false)
  }
  
  return (
    // 病友圈首页大盒子
    <div className={style.patientCircleBox} onScroll={(e:any)=>{
      if(e.target.scrollTop>=96){
        setHeaderIsopen(false)
      }else{
        setHeaderIsopen(true)
      }
    }}>
      {/* 病友圈头部 */}
      <div className={style.header}>
        {headerIsopen?<MyHeader></MyHeader>:<div className={style.headerchildren}>
          <h3>{headertitle}</h3>
          <input type="text" placeholder='请输入病症名称或标题关键字' onClick={()=>{
            navigate('/patient/circle/search')
          }}/>
          <img src={url4} alt="" />
          </div>}
      </div>
      {/* 病友圈tab切换 */}
      <div className={style.tablist}>
        <div className={style.tablist_children}>
          <ul className={style.tab}>
            {
              tablist.map(v => {
                return <li key={v.id} onClick={() => {
                  setHeadertitle(v.departmentName)
                  setActive(v.id)
                  setPathienCirclParams({
                    ...pathienCirclParams,
                    departmentId: v.id,
                    page: 1
                  })
                  setPathienCirclList([])
                  onLoadRefresh()
                }} className={v.id === active ? style.active : ''}>{v.departmentName}</li>
              })
            }
          </ul>
          <img src={url1} alt="" onClick={()=>{
            navigate('/patient/circle/search')
          }}/>
        </div>
      </div>
      {/* 病友圈列表 */}
      <div className={style.patientCircleList}>
        {/* 上拉 */}
        <List finished={finished} onLoad={onLoadRefresh}>
          {/* 循环渲染列表 */}
          {pathienCirclList.map((v) => {
            return <div key={v.sickCircleId}>
              <MypathienList item={v}></MypathienList>
            </div>
          })}
        </List>
      </div>
      <div className={style.footer}>
      <MypatientCieclefooter></MypatientCieclefooter>
      </div>
    </div>

  )
}

export default Index